<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt"%>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ request.getContextPath();
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
 		<link rel="stylesheet" type="text/css" href="<%=basePath %>/css/updateVideo.css" />
        <link rel="stylesheet" href="<%=basePath %>/css/list.css">
		<link href="<%=basePath %>/css/H-ui.min.css" rel="stylesheet" type="text/css" />
		<link href="<%=basePath %>/css/formsCSS.css" rel="stylesheet" type="text/css" />
		
		<!-- select start -->
		<link href="<%=basePath %>/lib/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
		<link href="<%=basePath %>/css/multiple-select.css" rel="stylesheet" type="text/css" /> 
		<!-- select end -->
		<script src="<%=basePath%>/lib/My97DatePicker/WdatePicker.js"></script>
		<script src="<%=basePath %>/js/jquery.min-1.11.js"></script>
		<script src="<%=basePath %>/js/formsJS.js"></script>
 	<script src="<%=basePath%>/js/multiple-select.js"></script> 	
	<script type="text/javascript">

function checkForm(f){
	if(f.title.value.replace(/\s/g,'') == ''){
		alert("标题不能为空");
		$("#title").focus();
		return false;
	}
	 if(f.ftype.value.replace(/\s/g,'') == ''){
		alert("优惠券类型不能为空");
		$("#ftype").focus();
		return false;
	}
	
	return true;
}

//选中下拉框选择的值
function choice(){
	var limits = document.getElementById('limits').value.trim();   
	 $("#courseId").multipleSelect("uncheckAll");
	 $("#chapterId").multipleSelect("uncheckAll");
	 $("#cardId").multipleSelect("uncheckAll");
	 if(limits==2){
   		 $("#divcourseId").show();
   		 $("#divchapterId").hide();
   		 $("#divcardId").hide();
   	 }else if(limits==3){
   		 $("#divcourseId").hide();
   		 $("#divchapterId").show();
   		 $("#divcardId").hide();
   	 }else if(limits==4){
   		 $("#divcourseId").hide();
   		 $("#divchapterId").hide();
   		 $("#divcardId").show();
   	 }else{
   		 $("#divcourseId").hide();
   		 $("#divchapterId").hide();
   		 $("#divcardId").hide();
   	 } 
	
}

</script>
</head>
<body>
<div class="connect_wrap">
  		<h3 style= "text-align: center;">优惠券维护</h3>
<div class="row cl" style="max-width:88%;margin-left:8%;">
<div class="labelText"></div>
	<form action="<%=basePath%>/Coupons/CouponsEdit" method="post" onsubmit="return checkForm(this)"
	enctype="multipart/form-data">
	<div class="col-sm-4"></div>
			<div class="col-sm-4">
					<div class="boxs">
					<input type="hidden" name="id" value="${coupons.id}">
					<input type="hidden" name="value_ids" value="${coupons.value_ids}" id="value_ids" >
					<input type="text" class="inputBox" placeholder="优惠券标题" name="title" value="${coupons.title}" >
					<input type="number" class="inputBox" placeholder="面值" name="cost" value="${coupons.cost}" >
					<input type="number" class="inputBox" placeholder="优惠券类型（0抵扣券，大于0为满多少可用）" name="ftype" value="${coupons.ftype}"  id="ftype">
					<div class="labelText" style="position: relative; top: 20px; left: 0px; color: rgb(154, 144, 144);">请选择适用范围</div>
					<select class="selectBox" name="limits" id="limits" onchange="choice()">
						<option value="1" ${coupons.limits == 1 ? 'selected="selected"' : '' }>全场</option>
						<option value="2" ${coupons.limits == 2 ? 'selected="selected"' : '' }>课程</option>
						<option value="3" ${coupons.limits == 3 ? 'selected="selected"' : '' }>章节</option>
						<option value="4" ${coupons.limits == 4 ? 'selected="selected"' : '' }>年卡</option>
  					</select>					
					
					<div style="width:90%;margin-top:30px" id="divcourseId">
					<div class="labelText" style="position: relative; left: 0px; color: rgb(154, 144, 144);">选择课程</div>
					<select name="courseId" id="courseId" multiple="multiple">
		    			<c:forEach items="${courses}" var="c">
		    				<option value="${c.id}" >${c.id}:${c.courseName}</option>
		    			</c:forEach>
  						</select>
  						</div>
  						
  						<div style="width:90%;margin-top:30px" id="divchapterId">
  						<div class="labelText" style="position: relative;left: 0px; color: rgb(154, 144, 144);">选择章节</div>
  						<select name="chapterId" id="chapterId" multiple="multiple">
		    			<c:forEach items="${chapters}" var="c">
		    				<option value="${c.id}" >${c.id}:${c.chapterName}</option>
		    			</c:forEach>
  						</select>
  						</div>
  						
  						<div style="width:90%;margin-top:30px" id="divcardId">
  						<div class="labelText" style="position: relative; left: 0px; color: rgb(154, 144, 144);">选择年卡</div>
  						<select name="cardId" id="cardId" multiple="multiple">
		    			<c:forEach items="${cards}" var="c">
		    				<option value="${c.id}" >${c.id}:${c.cardName}</option>
		    			</c:forEach>
  						</select>
  						</div>
  						 <input type="number" class="inputBox" placeholder="有效天数" name="valid_date" value="${coupons.valid_date}" >
  						 <br /><br />						
  						
  						 
				    	
					<input type="submit" value="确定" class="true" />
					<input type="button"  class="false" value="取消" onclick="window.history.go(-1)">
						</div>
				</div>
				</form>
		</div>
</div>

</body>
<script>

$(function(){
		var limits = document.getElementById('limits').value.trim();   
    	 if(limits==2){
   		 $("#divcourseId").show();
   		 $("#divchapterId").hide();
   		 $("#divcardId").hide();
   		 
   	 }else if(limits==3){
   		 $("#divcourseId").hide();
   		 $("#divchapterId").show();
   		 $("#divcardId").hide();
   		
   	 }else if(limits==4){
   		 $("#divcourseId").hide();
   		 $("#divchapterId").hide();
   		 $("#divcardId").show();
   		 
   	 }else{
   		 $("#divcourseId").hide();
   		 $("#divchapterId").hide();
   		 $("#divcardId").hide();
   	 } ;
});
$(function() {
    $('#courseId').multipleSelect({
        width: '100%'
    }).change(function(){
    	$("#value_ids").val($(this).val());
    });
    $('#chapterId').multipleSelect({
        width: '100%'
    }).change(function(){
    	$("#value_ids").val($(this).val());
    });
    $('#cardId').multipleSelect({
        width: '100%'
    }).change(function(){
    	$("#value_ids").val($(this).val());
    });
});
$(function(){
	//加载适用范围
	var v = $("#value_ids").val();
	var w = v.split(',');
	var limits = document.getElementById('limits').value.trim();   
	if(limits==2){
		$("#courseId").multipleSelect("setSelects",w);
	 }else if(limits==3){
		$("#chapterId").multipleSelect("setSelects",w);
	 }else if(limits==4){
		$("#cardId").multipleSelect("setSelects",w);
	 }
});
</script>	    	 
</html>